<!--
 * @Author: 王灿
 * @Date: 2019-11-30 22:04:26
 * @LastEditTime: 2019-12-03 23:50:09
 * @Description: 留存信息更改
 * @FilePath: \scarlet-sparrow-admin\src\views\home\home-customer\customer-info\info-operate\index.vue
 -->
<template>
  <div class="customer-info">
    <!-- 礼包列表 -->
    <happy-scroll color="rgba(0,0,0,0.05)" size="5" :resize="true">
      <el-table :data="tableData" style="width: 100%" class="customer-info__table">
        <!-- 礼包类型 -->
        <el-table-column prop="type" label="礼包类型">
          <template slot-scope="scope">
            <span>{{ onGetTypeVal(scope.row.type) }}</span>
          </template>
        </el-table-column>
        <!-- 优惠卷 -->
        <el-table-column prop="retainId" label="优惠卷/课程">
          <template slot-scope="scope">
            <el-select
              v-if="tableData[scope.$index].type === 2"
              v-model="tableData[scope.$index].retainId"
              filterable
              remote
              reserve-keyword
              clearable
              placeholder="请选择"
              :remote-method="onGetCourseList"
              @change="onChangeCourse(scope.$index)"
            >
              <el-option
                v-for="item in courseList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              v-if="tableData[scope.$index].type === 3"
              v-model="tableData[scope.$index].retainId"
              filterable
              remote
              reserve-keyword
              clearable
              placeholder="请选择"
              :remote-method="onGetCouponList"
              @change="onChangeCoupon(scope.$index)"
            >
              <el-option
                v-for="item in couponList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </el-table-column>
        <!-- 礼包名称 -->
        <el-table-column prop="retainName" label="礼包名称">
          <template slot-scope="scope">
            <el-input
              :placeholder="onGetTypeVal(scope.row.type) + '名称'"
              clearable
              v-model="tableData[scope.$index].retainName"
              :readonly="tableData[scope.$index].type !== 1"
            ></el-input>
          </template>
        </el-table-column>
        <!-- 礼包数量 -->
        <el-table-column prop="retainNum" label="礼包数量">
          <template slot-scope="scope">
            <el-input placeholder="礼包数量" clearable v-model="tableData[scope.$index].retainNum"></el-input>
          </template>
        </el-table-column>
        <!-- 更改 -->
        <el-table-column fixed="right" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" class="active" @click="onUpdate(scope.row)">更改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </happy-scroll>
  </div>
</template>

<script>
import { getCouponList } from '@/api/commodity.js'
import { getCourseList } from '@/api/course.js'
import { getRetainList, getRetainUpdate } from '@/api/home.js'
export default {
  name: 'CustomerInfo',
  props: {
    // 用户userId
    userId: {
      type: Number,
      default: 0
    },
    // 刷新
    isRefresh: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      options: [
        { value: 1, label: '商品' },
        { value: 2, label: '课程' },
        { value: 3, label: '优惠卷' },
        { value: 4, label: '摄影' },
        { value: 5, label: '用户vip名额' }
      ],
      // 留存数据
      tableData: [],
      // 课程列表
      courseList: [],
      // 优惠卷列表
      couponList: []
    }
  },
  watch: {
    // 深度监听
    userId: {
      handler() {
        if (!this.isRefresh) {
          this.onGetRetainList()
          this.onGetCourseList()
          this.onGetCouponList()
        }
      }
    }
  },
  created() {
    this.onGetRetainList()
    this.onGetCourseList()
    this.onGetCouponList()
  },
  methods: {
    // 获取留存数据
    onGetRetainList() {
      getRetainList({
        userId: this.userId
      }).then( res => {
        this.tableData = res.data
      })
    },
    // 根据类型获取名称
    onGetTypeVal(type) {
      let index = this.options.findIndex(item => item.value === type)
      return this.options[index].label
    },
    // 获取课程列表
    onGetCourseList(query) {
      this.courseList = []
      getCourseList({
        theme: query
      }).then(res => {
        res.data.list.forEach(item => {
          let params = {}
          params.value = item.id
          params.label = item.theme
          this.courseList.push(params)
        })
      })
    },
    // 获取优惠卷列表
    onGetCouponList(query) {
      this.couponList = []
      getCouponList({
        productName: query
      }).then(res => {
        res.data.list.forEach(item => {
          let params = {}
          params.value = item.id
          params.label = item.productName
          this.couponList.push(params)
        })
      })
    },
    // 根据优惠卷Id获取名称
    onGetCouponIdVal(id) {
      let index = this.couponList.findIndex(item => item.value === id)
      return this.couponList[index].label
    },
    // 获取优惠卷对应名称
    onChangeCoupon(index) {
      this.tableData[index].retainName = this.onGetCouponIdVal(
        this.tableData[index].retainId,
        this.couponList
      )
    },
    // 根据课程id取名称
    onGetCourseIdVal(id) {
      let index = this.courseList.findIndex(item => item.value === id)
      return this.courseList[index].label
    },
    // 获取课程对应名称
    onChangeCourse(index) {
      this.tableData[index].retainName = this.onGetCourseIdVal(
        this.tableData[index].retainId,
        this.courseList
      )
    },
    // 更改
    onUpdate(row) {
      getRetainUpdate({
          id: row.id,
          retainId: row.retainId || '',
          retainName: row.retainName,
          retainNum: row.retainNum,
        }).then(res => {
          this.$message({
            type: 'success',
            message: '更新成功'
          })
          this.onRefresh()
        })
    },
    // 刷新页面
    onRefresh() {
      setTimeout(() => {
        let data = { isShow: false, isRefresh: true }
        this.$emit('addTableRow', data)
      }, 500)
    }
  }
}
</script>

<style lang="scss">
.customer-info {
  height: 100%;
  @include column;
  .customer-info__table {
    border: 1px solid #ddd;
  }
  .el-table td,
  .el-table th {
    padding: 0 !important;
    height: 40px;
    line-height: 40px;
    font-size: 12px;
  }
  .vip-operate__btns {
    padding-top: 10px;
    box-shadow: 0 -2px 2px #ececec;
  }
}
</style>